<!--
Example of TreeGrid using asynchronous (AJAX) communication with server
Example of complex application with creating specific tree, server side child paging and more
Uses support file Schools.jsp as main application script that generates data, updates changes, adds new users
Uses support file SchoolsRatings.jsp as script for reading reviews
Uses support file SchoolsReview.jsp as script for saving one review back to database
Uses HSQLDB database ../Database.*
! Check if JSP application has write access to ../Database.* files
! Don't forget to copy hsqldb.jar file to JAVA shared lib directory
-->
<html>
   <head>
      <script src="../../../Grid/GridE.js"> </script>
      <style>
         /* Examples shared styles */
         .ExampleHeader,.ExampleName,.ExampleShort,.ExampleDesc,.ExampleErr { max-height:999999px; }
         .ExampleHeader { font:normal 12px Arial; color:blue; }
         .ExampleHeader b { color:#800; }
         .ExampleHeader i { font-style:normal; font-weight:bold; color:black; }
         .ExampleHeader u { font-weight:bold; text-decoration:none; padding:0px 2px 0px 2px; color:#0B0; }
         .ExampleName { font:bold 30px Arial; padding:5px 0px 5px 0px; }
         .ExampleShort { font:italic 15px Arial; margin-bottom:10px; padding-top:5px; }
         .ExampleDesc { font:14px/17px Arial; margin:0px 5px 10px 5px; padding:5px; border:1px solid #AAA; }
         .ExampleErr { font:14px/30px Arial; margin:50px auto 10px auto; padding:5px; border:1px solid black; color:red; width:800px; text-align:center; display:none; }
         .ExampleBorder { margin:0px 5px 0px 5px; clear:both; zoom:1; }
         .ExampleDesc ul { padding:0px 0px 0px 15px; margin:10px 0px 0px 0px; }
         .ExampleDesc li { padding-bottom:8px; line-height:18px; }
         .ExampleDesc h4 { font:bold 15px/20px Arial; margin:0px; padding:0px 6px 0px 6px; background:#87DAE5; border:1px solid #888; color:black; display:inline; }
         .ExampleDesc u { font-size:11px; text-decoration:none; }
         .ExampleDesc .Link { text-decoration:underline; color:blue; cursor:pointer; }
         .ExampleMain { height:300px; }
         @media (max-height:800px) { 
            .ExampleDesc { font-size:13px; line-height:15px; margin:0px 5px 5px 5px; padding:3px 5px; } 
            .ExampleDesc br { display:none; }
            .ExampleName { font:20px Arial; padding:0px; }
            .ExampleShort { font-size:13px; }
            }

         .SchoolsButtons { border:#ddd 1px solid; padding:5px; background:#fafafa; }
      </style>
   </head>
   <body>
      <center class="ExampleHeader"><script>document.write(location.href.replace(/(.*)(\/Examples\/|\/ExamplesGantt\/)([^\/]+)\/([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/<i>$4</i>/$5").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></center>
      <center class="ExampleName">School list and ratings</center>
      <center class="ExampleShort">Demonstration of framework of item list with ratings and reviews.</center>
      <div class="ExampleErr">
         <script> if(location.protocol=="file:") document.write("<style>.ExampleDesc, .ExampleBorder {display:none;} .ExampleErr { display:block; } </style>"); </script>
         Do <b>not</b> run this file locally!<br />Run it from your local or remote web http server where is installed JAVA JRE.<br>
      </div>
      <div class="ExampleDesc">
         <i>Source files:</i> <h4>Schools.html</h4> (this html page), <a href="SchoolsDef.xml" target="_blank"><h4>SchoolsDef.xml</h4></a> (static XML layout), 
         <a href="Schools.jsp" target="_blank"><h4>Schools.jsp</h4></a> (server script generates and processes XML data and manages users), 
         <a href="SchoolsRatings.jsp" target="_blank"><h4>SchoolsRatings.jsp</h4></a> (server script generates XML with user ratings), 
         <a href="SchoolsReview.jsp" target="_blank"><h4>SchoolsReview.jsp</h4></a> (server script saves user review to db), 
         <h4>../Database.*</h4> (source SQL database, tables <b>Schools_Schools</b>, <b>Schools_Ratings</b>, <b>Schools_Reviews</b>)
      </div>
      <div class="ExampleDesc">
         <h4 style="background:#FCC;">You have to copy file <b style="color:red;">hsqldb.jar</b> to your JRE shared lib directory and <b style="color:red;">restart</b> your http server</h4><br />
         <h4 style="background:#FCC;">The JSP service program must have <b style="color:red;">write</b> access to all files <b style="color:red;">database.*</b></h4><br />
         The <h4>hsqldb.jar</h4> is JDBC driver for <a href='http://www.hsqldb.org'><h4>HSQLDB database</h4></a> and is located in TreeGrid distribution in <b>/Server/Jsp/</b> directory.
         <u>The shared lib directory is usually <b><i>jre_install_path</i>/lib/ext</b> and also e.g. in Tomcat is usually <b><i>tomcat_install_path</i>/shared/lib</b>.</u><br>
         You can use any other SQL database instead of HSQLDB (e.g. <h4>Oracle</h4>, <h4>MS SQL server</h4>, <h4>MySQL</h4> ,...), just assign different connection to java.sql.Connection Conn in the *.jsp files. 
         You can run the ../<b>MySqlUTF8.sql</b> script to create the "TreeGridTest" sample database on your SQL server.
      </div>
      <div class="ExampleDesc">
         There are three modes to work with data:<br />
         a) <strong><em>View all data and rate</em></strong> and review the schools. 
            Default mode, without log in.<br/>
         b) <strong><em>Edit data as user</em></strong> . Every user has his own data. 
            You can log in as <strong>Jan</strong>, <strong>Magda</strong>, <strong>David</strong>,
            <strong>Adam</strong>, <strong>Linda</strong> , all without password. 
            Or you can add new user by entering new name and password.<br/>
         c) <strong><em>Edit all data as administrator</em></strong> . You can edit all data or even assign it to another user. 
            You can log in as <strong>Admin</strong>, without password.<br/>
      </div>
      <div class="ExampleDesc SchoolsButtons">
         <i>Log in to add or edit your events </i>
          Name: <input type="text" id="IName" style="width:110px;" />
          Password: <input type="password" id="IPass" style="width:110px;" />
         <button onclick='Reload(0);' title='Edit mode for users and admin' type="button">Edit</button>
         <button onclick='Reload(1);' title='Read only mode for visitors' type="button">View</button>
         <button onclick='Reload(2);' title='Adds new user to add events, with name and password' type="button">New user</button>
      </div>
      <div class="ExampleBorder">
         <div class="ExampleMain">
            <bdo Debug='1' 
               Layout_Url="SchoolsDef.xml"
               Data_Url="Schools.jsp"
               Upload_Url="Schools.jsp" Upload_Method="Form" Upload_Data="TGData" Upload_Format="Internal" 
               Page_Url="SchoolsRatings.jsp" Page_Method="Form" Page_Data="TGData" Page_Format="Internal"
               Export_Url="../Framework/Export.jsp"
               ></bdo>
         </div>
      </div>
      <div class="ExampleDesc SchoolsButtons">
         <button style='display:none' id="BSave" onclick='Grids[0].ControlPanel.Click(1);' type="button">Save changes</button>
         <button style='display:none' id="BReload" onclick='Grids[0].ControlPanel.Click(2);' type="button">Cancel changes</button>
         <button style='display:none' id="BAdd" onclick='Grids[0].ControlPanel.Click(3);' type="button">Add record</button>
         <button onclick='Grids[0].ControlPanel.Click(8);' type="button">Expand all</button>
         <button onclick='Grids[0].ControlPanel.Click(9);' type="button">Collapse all</button>
         <button onclick='Grids[0].ControlPanel.Click(14);' type="button">Choose columns</button>
      </div>
      <script>
function Reload(type){
var G = Grids[0];
if(!IName.value && type!=1) {
   alert("Please enter your name !");
   IName.focus();
   return;
   }
IName.value = IName.value.replace('$','_'); // The TreeGrid id cannot contain '$'
if(type==2){
   if(!confirm("Do you want to add new user '"+IName.value+"' "+(IPass.value?"with":"without")+" password?")) return;
   }
G.Data.Data.Param["User"]=type==1?"":IName.value;
G.Data.Data.Param["Pass"]=type==1?"":IPass.value;
G.Data.Upload.Param["User"] = G.Data.Data.Param["User"];
G.Data.Upload.Param["Pass"] = G.Data.Data.Param["Pass"];
G.Data.Data.Param["New"]=type==2?"1":"0";
BSave.style.display=type==1?"none":"";
BReload.style.display=type==1?"none":"";
BAdd.style.display=type==1?"none":"";
G.Reload();
}

Grids.OnEndEdit = function(G,row,col,save,val){
if(col=='CUser' && save && !val){ alert("User cannot be empty"); return -1; }
}

Grids.OnAfterValueChanged = function(G,row,col){
if(col=='CUser'){
   var val = G.GetString(row,col);
   for(var r=row.firstChild;r;r=r.nextSibling){ G.SetValue(r,"CUser",val); G.ColorRow(r); } // Changes also User for children
   }
}

Grids.OnButtonClick = function(G,row,col){
var A = "<table cellspacing=0 cellpadding=0>";
A+="<tr><td align=center colspan=12>Please rate and review the school</td></tr>";
A+="<tr><td align=center colspan=12 style='color:green;'><B>"+G.GetString(row,"CName")+"</B></td></tr>";
A+="<tr><td colspan=12><hr></td><tr>";
A+="<tr>";
A+="<td><input type=radio name=stars></td><td><i style='color:6969AA;'>No star</i></td>"
for(var i=1;i<=5;i++) A+="<td>&nbsp;&nbsp;&nbsp;<input type=radio name=stars></td><td><div style='width:"+(i*16)+"px;overflow:hidden;'><img src='SchoolsStars.gif'></div></td>";
A+="</tr>";
A+="<tr><td colspan=12><br></td><tr>";
A+="<tr><td colspan=12><textarea id=review rows=4 style='width:100%;'></textarea></td><tr>";
A+="<tr><td colspan=12><hr></td><tr>";
A+="<tr><td colspan=12 align=center><button onclick='Rate(1,\""+row.id+"\");' class=GCfgMenuButton style='width:60px;'>OK</button><button onclick='Rate(0);' class=GCfgMenuButton style='width:60px;'>Cancel</button></td></tr>";
A+="<table>";
G.ShowMessage(A,null,null,true);  
}

Grids.OnGetExportValue = function(G,row,col,val,frm){
if(col=="CRating"&&!row.Fixed) return val-1;
}

function Rate(ok,id){
var G = Grids["Schools"];
if(ok){
   var I = document.getElementsByName("stars");
   for(var i=0;i<I.length;i++) if(I[i].checked) break;
   if(i==I.length){
      alert("Please select number of stars");
      return;
      }
   var D = new Object();
   D.Url = "SchoolsReview.jsp";
   D.Method = "Form";
   var P = new Object();
   D.Param = P;
   P.id = id;
   P.Text = document.getElementById("review").value;
   var S = document.getElementsByName("stars");
   for(var i=0;i<S.length;i++) if(S[i].checked){ P.Stars = i+1; break; }
   D.Debug=1;
   G.Communicate2(D,"",function(code){
      if(code>=0){
         var par = G.GetRowById(id).lastChild;
         if(par.State>=2 || par.Count==0){ // Loaded already or empty
            var row = G.AddRow(par,null,0,1,"Review");
            G.SetValue(row,"CName",(new Date()).getTime());
            G.SetValue(row,"CCountry",P.Text);
            G.SetValue(row,"CRating",P.Stars);
            G.ShowRow(row);
            }
         else {
            par.Count = par.Count-0+1;
            par.CRatingsum = par.CRatingsum-0+P.Stars;
            G.Recalculate(par,null,1);
            }
         }
      });
   }
G.HideMessage();
}

      </script>

      <!-- Google Analytics code run once for trial -->
      <script>
         var TGTrial = document.cookie.match(/TGTrialJSP\s*=\s*(\d+)/), TGIndex = 4;
         if(!TGTrial||!(TGTrial[1]&TGIndex)) setTimeout(function(){
            var n = "RunTrialJSPSchools", d = (new Date((new Date).getTime()+31536000000)).toUTCString(); document.cookie = "TGTrialJSP="+((TGTrial?TGTrial[1]:0)|TGIndex)+";expires="+d;
            var u = document.cookie.match(/TGTrialUsed\s*=\s*(\d+)/); u = u ? u[1]-0+1 : 1; if(u<=11) document.cookie = "TGTrialUsed="+u+";path=/;expires="+d;
            var s = "<div style='width:0px;height:0px;overflow:hidden;'><iframe src='http"+(document.location.protocol=="https"?"s":"")+"://www.treegrid.com/Stat/GA.html?productName="
                 +(u==1||u==3||u==5||u==10?"UsedTrial"+u:n)+"' onload='var T=this;setTimeout(function(){document.body.removeChild(T.parentNode.parentNode);},1000);'/></div>";
            var F = document.createElement("div"); F.innerHTML = s; document.body.appendChild(F);
            },100);
      </script>

   </body>
</html>
